<template>
  <div
    ref="customForm"
    class="custom-van-radio custom-form-container"
  >
    <FieldLabel
      :error-message="errorMessage"
      :required="required"
      :label="label"
    >
      <van-radio-group v-model="inputValue">
        <van-cell-group>
          <div
            v-for="(o, index) in option"
            :key="o.field_label"
            class="cell-group-radio"
          >
            <CustomVanCell
              :can-do="canDo"
            >
              <van-radio
                :name="o.field_value"
                :disabled="canDo"
                @click="onChange({
                  [collectProps.type]: o.field_value,
                  fill: o.has_fill,
                })"
              >
                <span class="van_cell_field_label">{{ o.field_label }}</span>
                <template #icon="props">
                  <img
                    class="img-icon"
                    :src="props.checked ? (canDo ? activeIcon1 : activeIcon) : inactiveIcon"
                  >
                </template>
              </van-radio>
            </CustomVanCell>
            <template
              v-if="o.has_fill"
            >
              <collapse>
                <div
                  v-show="o.field_value === inputValue"
                  class="cell-group-input"
                >
                  <CustomVanInput
                    :ref="`vanSelectInput${index}`"
                    v-model="o.fill_value"
                    v-bind="o.prop"
                    :is-error-message="false"
                  />
                  <span
                    v-if="o.prop.required"
                    class="tips"
                  >*</span>
                </div>
              </collapse>
            </template>
          </div>
        </van-cell-group>
      </van-radio-group>
    </FieldLabel>
  </div>
</template>

<script>
import field from '../mixins/field';
import model from '../mixins/model';
import rule from '../mixins/rule';
import radio from '../mixins/radio';
import choice from '../mixins/choice';
import collect from '../mixins/collect/choice';
import remote from '../mixins/remote/choice';

export default {
  name: 'CustomVanRadio',

  mixins: [field, model('change'), rule, choice, collect, remote, radio],

  data() {
    return {
      activeIcon: require('./images/activeIcon.png'),
      activeIcon1: require('./images/activeIcon1.png'),
      inactiveIcon: require('./images/inactiveIcon.png')
    };
  }
};
</script>

<style lang="scss" scoped>
.img-icon {
  width: 18px;
  height: 18px;
}
</style>
